<!DOCTYPE html >
<html>
<head>
    <title>Pie Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="../../../libraries/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/themes/gray.js"></script>

    <script type="text/javascript">
      var chart;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  defaultSeriesType: 'areaspline'
              },
              title: {
                  text: 'Nombre de commande de la semaine, avec les differents status'
              },
              legend: {
                  layout: 'vertical',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 150,
                  y: 50,
                  floating: true,
                  borderWidth: 1,
                  backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
              },
              xAxis: {
                  categories: [
                      'Lundi', 
                      'Mardi', 
                      'Mercredi', 
                      'Jeudi', 
                      'Vendredi', 
                      'Samedi', 
                      'Dimanche'
                  ],
                  plotBands: [{
                      from: 4.5,
                      to: 6.5,
                      color: 'rgba(68, 170, 213, .2)'
                  }]
              },
              yAxis: {
                  title: {
                      text: 'Total commande'
                  }
              },
              tooltip: {
                  formatter: function() {
                      return ''+this.x +': '+ this.y +' commande(s)';
                  }
              },
              credits: {
                  enabled: false
              },
              plotOptions: {
                  areaspline: {
                      fillOpacity: 0.5
                  }
              },
              series: [{
                  name: 'Status 0',
                  data: [3, 4, 3, 5, 4, 1, 0]
              }, {
                  name: 'Status 1',
                  data: [1, 3, 5, 3, 3, 5, 0]
              }, {
                  name: 'Status 2',
                  data: [0, 0, 0, 5, 3, 5, 7]
             }]
      });  
});
    </script>

</head>
<body>
    <div id="container" style="height:410px; margin: 0 2em; min-width: 600px">
</body>
</html>
